<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'EditImg',
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { qrMiniprogramOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}

const dialogVisible = ref(false)

const form = ref({})
const isNew = ref(true)
let initForm = {}

const formRef = ref()
const show = (val) => {
  if (!isEmpty(val)) {
    var object = deepClone(qrMiniprogramOrignalForm)
    form.value = Object.assign(object, val)
    isNew.value = false
  } else {
    isNew.value = true
  }
  dialogVisible.value = true
}
const rules = ref({
  title: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' },
  ],
})
const change = (e) => {}
const cancel = (done) => {
  resetForm()
  dialogVisible.value = false
}
const getUploadImg = (val) => {
  console.log('组件返回的img')
  form.value.url=val.url
}
const resetForm = () => {
  form.value = qrMiniprogramOrignalForm
}
const submit = () => {
  if (!formRef) return
  formRef.value.validate((valid) => {
    if (valid) {
      form.value.type=3
      emits('getDialogueData', toRaw(form.value))
      cancel()
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const emits = defineEmits(['getDialogueData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      :title="(isNew == true ? '新增' : '编辑') + '图片'"
      width="700px"
      :before-close="cancel"
    >
      <el-tag
        style=""
        class="app-el-tag-common app-margin-bottom"
        type="primary"
      >
        <MyIcon class="app-icon app-primary-font" name="Bell" />
        请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败
      </el-tag>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="小程序标题：" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="小程序appID：" prop="appId">
          <el-input v-model="form.appId" />
        </el-form-item>
        <el-form-item label="小程序路径：" prop="appUrl">
          <div>
            <el-input v-model="form.appUrl" />
            <div class="app-words-tip-weak">
              注意：小程序路径应以html作为后缀
            </div>
          </div>
        </el-form-item>
        <el-form-item label="小程序封面：">
          <div>
            <div>
              <Upload @getImg="getUploadImg($event, val)" />
            </div>

            <div class="app-words-tip-weak">
              建议图片大小在2M以内,建议尺寸：352*282px
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
